let goodlist = ['图书', '电子书', '原创文学', '服装', '运动户外', '孕婴童', '家居', '创意文具', '地方特产', '海外购', '电器城'];
let goodsDom = document.querySelector('#goodslist');
goodlist.forEach(function (item, index) {
    var nameElement = document.createElement('li');
    goodsDom.appendChild(nameElement);
    nameElement.innerText = item;
})
//二级菜单
let menulistDom = document.querySelectorAll('#menulist li');
let pDom = document.querySelectorAll('#menulist li p')
let contentDom = document.querySelectorAll('.content')
for (let i = 0; i < menulistDom.length; i++) {
    menulistDom[i].addEventListener('mouseover', function () {
        pDom[i].className = 'active'
        contentDom[i].className = 'content show'
    })
    menulistDom[i].addEventListener('mouseout', function () {
        pDom[i].className = ''
        contentDom[i].className = 'content'
    })
}
//轮播图点击和切换
let imgBtn = document.querySelector('.img-list');
//左边按钮点击
let leftByn = document.querySelector('.lefttwo');
let currentIndex = 0;
let bannersBtns = document.querySelectorAll('.banners-list img');
const images = Array.from(bannersBtns);
console.log(images);
document.addEventListener("DOMContentLoaded", function () {
    currentIndex = 0; // 将currentIndex初始化为0，对应第一个按钮
    updateimages(); // 更新当前选中图片和分页按钮
});
function updateimages() {
    images.forEach(function (img, i) {
        img.style.display = (i === currentIndex) ? 'block' : 'none';
        pageItems[i].className = 'page-item'
        pageItems[currentIndex].className='activelist activete '
    });

}
//轮播图换页
let pageItems = document.querySelectorAll('.page-item');
// 为分页按钮添加点击事件
pageItems.forEach(function(item, index){
    item.addEventListener('click', function () {
        currentIndex = index;
        updateimages();
    });
});
leftByn.addEventListener('click', function () {
    if (currentIndex > 0) {
        currentIndex--;
    } else {
        currentIndex = images.length - 1;
    }
    updateimages();
})
//右边按钮点击
let rightDom = document.querySelector('.righttwo');
rightDom.addEventListener('click', function () {

    if (currentIndex < images.length - 1) {
        currentIndex++;
    } else {
        currentIndex = 0;
    }
    updateimages();

})
//定时器播放
let timer;
function startNext() {
    timer = setInterval(function () {
        if (currentIndex < images.length - 1) {
            currentIndex++;
        } else {
            currentIndex = 0;
        }
        updateimages();
    }, 2000);
}
document.addEventListener("DOMContentLoaded", function () {
    startNext();
});
// 鼠标悬停时停止自动切换
imgBtn.addEventListener('mouseover', function () {
    clearInterval(timer);
    console.log(timer);
});

// 鼠标离开时恢复自动切换
imgBtn.addEventListener('mouseout', function () {
    startNext();
    console.log(timer);
});



//显示推荐页面
let recommendListContainer = document.querySelector('.recommend-item-list');
let recommendlists = [
    { img: './img/首页图片/shubiao.jpg', msg: '黑爵青锋侠六键电竞游戏鼠标', msgtwo: '全国联保，一年免费包换', price: 299 },
    { img: './img/首页图片/shubiao.jpg', msg: '黑爵青锋侠六键电竞游戏鼠标', msgtwo: '全国联保，一年免费包换', price: 299 },
    { img: './img/首页图片/shubiao.jpg', msg: '黑爵青锋侠六键电竞游戏鼠标', msgtwo: '全国联保，一年免费包换', price: 299 },
    { img: './img/首页图片/shubiao.jpg', msg: '黑爵青锋侠六键电竞游戏鼠标', msgtwo: '全国联保，一年免费包换', price: 299 },
    { img: './img/首页图片/shubiao.jpg', msg: '黑爵青锋侠六键电竞游戏鼠标', msgtwo: '全国联保，一年免费包换', price: 299 },
    { img: './img/首页图片/shubiao.jpg', msg: '黑爵青锋侠六键电竞游戏鼠标', msgtwo: '全国联保，一年免费包换', price: 299 },
    { img: './img/首页图片/cahu.jpg', msg: '小熊家用静音加湿器', msgtwo: '唯美外观，微米级喷雾', price: 89 },
    { img: './img/首页图片/cahu.jpg', msg: '小熊家用静音加湿器', msgtwo: '唯美外观，微米级喷', price: 89 },
    { img: './img/首页图片/cahu.jpg', msg: '小熊家用静音加湿器', msgtwo: '唯美外观，微米级喷', price: 89 },
    { img: './img/首页图片/cahu.jpg', msg: '小熊家用静音加湿器', msgtwo: '唯美外观，微米级喷', price: 89 },
    { img: './img/首页图片/cahu.jpg', msg: '小熊家用静音加湿器', msgtwo: '唯美外观，微米级喷', price: 89 },
    { img: './img/首页图片/cahu.jpg', msg: '小熊家用静音加湿器', msgtwo: '全唯美外观，微米级喷', price: 89 },
]
// 初始化 HTML 字符串
let html = '';

// 遍历推荐列表并拼接 HTML
recommendlists.forEach((item, index) => {
    html += `
        <div class="recommend-list">
            <div class="item-img">
                <img src="${item.img}" alt="">
            </div>
            <div class="item-tag">
                <img src="./img/首页图片/limitTime.jpg" alt="">
            </div>
            <div class="item-msgone">
                ${item.msg}
            </div>
            <div class="item-msgtwo">
                ${item.msgtwo}
            </div>
            <div class="item-text">
                ￥ ${item.price}
            </div>
        </div>
    `;
});

// 将拼接好的 HTML 插入到容器中
recommendListContainer.innerHTML = html;
//图书 电子书
let booktext = ['中小学教辅', '外语', '考试', '小说', '文学', '青春文学', '成功/励志', '管理', '历史', '哲学/宗教', '亲子/家教', '全部分类']
let booktextBtn = document.querySelector('.imgbookstext');
let htmltwo = ''
// 遍历booktext数组，构建HTML字符串
booktext.forEach(function (item, index) {
    htmltwo += `
        <div class="book-item-text">
            ${item}
        </div>
    `;
});
booktextBtn.innerHTML = htmltwo
//图片展示
// 图片展示
let bottonBookBtn = document.querySelector('.bottom-img');
let bookImage = [
    { img: './img/首页图片/index09_05.jpg', price: 79 },
    { img: './img/首页图片/index09_05.jpg', price: 79 },
];
let htmlthree = '';

// 定义 toImage 函数
function toImage() {
    let html = ''; // 创建一个新的局部变量来构建 HTML 字符串
    bookImage.forEach(function (item, index) {
        html += `
            <div class="books-botton-item">
                <div class="books-botton-text">奥运狂欢</div>
                <div class="books-botton-texttwo">十万种电子书直降40%</div>
                <div class="books-botton-image">
                    <img src="${item.img}" alt="Book Image">
                </div>
                <div class="books-botton-price">
                    ￥ ${item.price}
                </div>
            </div> 
        `;
    });
    return html; // 返回构建好的 HTML 字符串
}

// 使用 toImage 函数生成的 HTML 更新 bottonBookBtn 的内容
bottonBookBtn.innerHTML = toImage();


let leftfourBtn = document.querySelector('.leftfour-three-left');
let htmlfour = ''
leftfourBtn.innerHTML = toImage(htmlfour)
let rightfourBtn = document.querySelector('.leftfour-three-right')
let htmlfive = ''
rightfourBtn.innerHTML = toImage(htmlfive)


// 获取所有的图书名称元素和内容区域 手风琴效果
let booksTitle = document.querySelectorAll('.content-books-list p');
let infoDoms = document.querySelectorAll('.info')
let ItemDoms = document.querySelectorAll('.books-list-alls')

// 默认效果设置：
// 第0个title 隐藏  第0个详情显示
booksTitle[0].style.display = 'none';
infoDoms[0].style.display = 'flex';

// 监听移入事件
ItemDoms.forEach(function(item,index){
    item.addEventListener('mouseover',function(){
        // 所有的标题都显示 所有的详情都隐藏
        for(let i=0;i<booksTitle.length;i++){
            booksTitle[i].style.display = 'block';
            infoDoms[i].style.display = 'none';
        }

        // 对应的标题隐藏  对应的详情显示  index
        booksTitle[index].style.display = 'none';
        infoDoms[index].style.display = 'flex';
    })
})

//服装
let clothesBtn = document.querySelector('.clothes-first-texts')
let clothesItem = ['女包', '防晒品', '短裤', '冰丝内裤', '男包', '功能箱包', '蕾丝衬衫', '奢侈品', '男鞋',
    '女包', '女鞋', '全部分类>']
let htmlsix = '';
clothesItem.forEach(function (item, index) {
    htmlsix += `
    <div class="clothes-item-text">
        ${item}
    </div>
`;
})
clothesBtn.innerHTML = htmlsix;
//户外运动
let playDom = document.querySelector('.play-bottom-text');
let playItem = ['女包', '防晒品', '短裤', '冰丝内裤', '男包', '功能箱包', '蕾丝衬衫', '奢侈品', '男鞋',
    '女包', '女鞋', '全部分类>']
let htmlseven = '';
playItem.forEach(function (item, index) {
    htmlseven += `
    <div class="play-item-text">
        ${item}
    </div>
`;
})
playDom.innerHTML = htmlseven
//童装 童鞋 婴儿装
let childBtn = document.querySelector('.child-center-bottom');
let childItem = ['女包', '防晒品', '短裤', '冰丝内裤', '男包', '功能箱包', '蕾丝衬衫', '奢侈品', '男鞋',
    '女包', '女鞋', '全部分类>']
let htmleight = ''
childItem.forEach(function (item, index) {
    htmleight += `
    <div class="child-item-text">
        ${item}
    </div>
`;
})
childBtn.innerHTML = htmleight
//推广商品
let productDom = document.querySelector('.big-products-center > .products-center:first-child');
let productItem = [
    { img: './img/首页图片/index25_12.jpg', msg: 'Pigeon法国制奶嘴,无毒天然乳胶', msgtwo: '已有988条评价', price: 189, imgtwo: './img/首页图片/index27_14.jpg' },
    { img: './img/首页图片/index25_12.jpg', msg: 'Pigeon法国制奶嘴,无毒天然乳胶', msgtwo: '已有988条评价', price: 189, imgtwo: './img/首页图片/index27_14.jpg' },
    { img: './img/首页图片/index25_12.jpg', msg: 'Pigeon法国制奶嘴,无毒天然乳胶', msgtwo: '已有988条评价', price: 189, imgtwo: './img/首页图片/index27_14.jpg' },
    { img: './img/首页图片/index25_12.jpg', msg: 'Pigeon法国制奶嘴,无毒天然乳胶', msgtwo: '已有988条评价', price: 189, imgtwo: './img/首页图片/index27_14.jpg' },
    { img: './img/首页图片/index25_12.jpg', msg: 'Pigeon法国制奶嘴,无毒天然乳胶', msgtwo: '已有988条评价', price: 189, imgtwo: './img/首页图片/index27_14.jpg' },
    { img: './img/首页图片/index25_12.jpg', msg: 'Pigeon法国制奶嘴,无毒天然乳胶', msgtwo: '已有988条评价', price: 189, imgtwo: './img/首页图片/index27_14.jpg' },
    { img: './img/首页图片/index25_12.jpg', msg: 'Pigeon法国制奶嘴,无毒天然乳胶', msgtwo: '已有988条评价', price: 189, imgtwo: './img/首页图片/index27_14.jpg' },
    { img: './img/首页图片/index25_12.jpg', msg: 'Pigeon法国制奶嘴,无毒天然乳胶', msgtwo: '已有988条评价', price: 189, imgtwo: './img/首页图片/index27_14.jpg' },
    { img: './img/首页图片/index25_12.jpg', msg: 'Pigeon法国制奶嘴,无毒天然乳胶', msgtwo: '已有988条评价', price: 189, imgtwo: './img/首页图片/index27_14.jpg' },
    { img: './img/首页图片/index25_12.jpg', msg: 'Pigeon法国制奶嘴,无毒天然乳胶', msgtwo: '已有988条评价', price: 189, imgtwo: './img/首页图片/index27_14.jpg' },

]
let htmlnine = '';
productItem.forEach(function (item, index) {
    htmlnine += `
    <div class="product-item">
         <div class="product-item-imgone">
                 <img src="${item.img}" alt=""> 
         </div>
         <div class="product-item-msg">
             ${item.msg}
         </div>
         <div class="product-item-text">
             ￥:${item.price}
         </div>
         <div class="product-item-big">
                  <div class="product-item-imgtwo">
                           <img src="${item.imgtwo}" alt="">
                  </div>
                  <div class="product-item-msgtwo">
                         ${item.msgtwo}
                  </div>
         </div>
    </div>
`;
})
productDom.innerHTML = htmlnine

//推广商品点击改变颜色
let productDomThree = document.querySelectorAll('.product-item')
productDomThree.forEach(function(item,index){
    item.addEventListener('click',function(){

        for(let i=0;i<productDomThree.length;i++){
            productDomThree[i].style.background='#fff'
        }
        productDomThree[index].style.background='#f2f2f2'

    })
})


//返回顶部

//显隐返回顶部盒子大于500px时候就显示，否则就隐藏
let toTopBtn = document.querySelector('.to-top');
window.addEventListener('scroll', function () {
    let top = document.documentElement.scrollTop || this.document.body.scrollTop;
    if (top > 500) {
        toTopBtn.style.display = 'block'
    }
    else {
        toTopBtn.style.display = 'none'
    }
})
//点击顶部就返回
toTopBtn.addEventListener('click', function () {
    let timer = setInterval(function () {
        //获取当前位置
        let top = document.documentElement.scrollTop || this.document.body.scrollTop;
        let newtop = top - 50;
        document.documentElement.scrollTop = newtop
        if (newtop <= 0) {
            clearInterval(timer)
        }
    }, 10)
})


let imgDoms = document.querySelectorAll('.slides-img');
let slidesItems = document.querySelectorAll('.slides-item');
let textDoms = document.querySelectorAll('.slides-text');

// 遍历每一个slides-item及其内部的图片和文本
for (let i = 0; i < imgDoms.length; i++) {
    imgDoms[i].style.background = `url('./img/首页图片/floor.png') 0 ${i * -40}px`;
    // 如果slides-text也需要根据索引做相应处理，请添加相应的逻辑
}
slidesItems.forEach(function (item, index) {
    item.addEventListener('mouseover', function () {
        imgDoms[index].style.background = `url('./img/首页图片/floor.png') #93d470 40px ${index * -40}px`
        textDoms[index].style.display = 'block'
        

    })
})
slidesItems.forEach(function (item, index) {
    item.addEventListener('mouseout', function () {
        imgDoms[index].style.background = `url('./img/首页图片/floor.png') 0 ${index * -40}px`
        textDoms[index].style.display = 'none'
    })
})
let slidesDom = document.querySelector('.slides');
window.addEventListener('scroll', function () {
    let top = document.documentElement.scrollTop || this.document.body.scrollTop;
    if (top > 500) {
        slidesDom.style.display = 'block'
    }
    else {
        slidesDom.style.display = 'none'
    }
})
//顶部搜索
//获取顶部搜索框
let topSearch = document.querySelector('.top-search')
/**滚动事件 */
// 获取两个输入框元素引用
let input1 = document.getElementById('input1');
let inp2 = document.getElementById('inp2');

// 监听inp2输入框的'input'事件，同步输入内容
inp2.addEventListener('input', function() {
    input1.value = inp2.value;
});
input1.addEventListener('input',function(){
    inp2.value = input1.value
})
// ... 然后是原有的滚动事件处理函数 ...
window.addEventListener('scroll', function () {
    let top = document.body.scrollTop || this.document.documentElement.scrollTop;
    console.log(top);
    if (top > 500) {
        // 添加显示类名以启动过渡动画
        topSearch.classList.add('show');
        topSearch.style.height = '50px';
    } else {
        // 移除显示类名
        topSearch.classList.remove('show');
        topSearch.style.height = '0';
    }

})
//选项卡
let booksText = document.querySelectorAll('.book-text');
let contentone = document.querySelectorAll('.books-content-item');

booksText.forEach(function (item, index) {
    item.addEventListener('click', function () {
        for (let i = 0; i < booksText.length; i++) {
            booksText[i].className = 'book-text';
            contentone[i].className = 'books-content-item'
        }
        booksText[index].className = 'book-text activeone';
        contentone[index].className = 'books-content-item showthree'

    })
})

let clothesText = document.querySelectorAll('.clothes-text');
let clothescontent = document.querySelectorAll('.clothes-content-item');
clothesText.forEach(function (item, index) {
    item.addEventListener('click', function () {
        for (let i = 0; i < clothesText.length; i++) {
            clothesText[i].className = 'clothes-text';
            clothescontent[i].className = 'clothes-content-item'
        }
        clothesText[index].className = 'clothes-text activefour'
        clothescontent[index].className = 'clothes-content-item showfour'

    })
})

//户外运动
let playtext = document.querySelectorAll('.play-text');
let playItems = document.querySelectorAll('.play-conter-item');
playtext.forEach(function (item, index) {
    item.addEventListener('click', function () {
        for (let i = 0; i < playtext.length; i++) {
            playtext[i].className = 'play-text ';
            playItems[i].className = 'play-conter-item'
        }
        playtext[index].className = 'play-text activefive';
        playItems[index].className = 'play-conter-item showfive'

    })
})
//童装
let childDom = document.querySelectorAll('.child-text');
let childItems = document.querySelectorAll('.child-center-item');
childDom.forEach(function (item, index) {
    item.addEventListener('click', function () {
        for (let i = 0; i < childDom.length; i++) {
            childDom[i].className = 'child-text';
            childItems[i].className = 'child-center-item'
        }
        childDom[index].className = 'child-text activesix';
        childItems[index].className = 'child-center-item showeight'
    })
}) 

//推广商品选项卡
let boxDom = document.querySelectorAll('.box-item');
let productDomtwo = document.querySelectorAll('.products-center');
boxDom.forEach(function(item,index){
    item.addEventListener('click',function(){
        for(let i=0;i<boxDom.length;i++){
            boxDom[i].className = 'box-item'
            productDomtwo[i].className='products-center'
        }
        boxDom[index].className = 'box-item activeeight'
        productDomtwo[index].className='products-center shownine'

    })
})
//跳转登录页面
let firstLink = document.querySelector('.first-login');
firstLink.addEventListener('click', function() {
    window.location.href = '/login.html'; // 使用JavaScript跳转
});
//跳转注册页面
let secondLink = document.querySelector('.first-thrid');
secondLink.addEventListener('click', function() {
    window.location.href = '/register.html'; // 使用JavaScript跳转
});
//领劵中心
let voucherDom = document.querySelector('.right-voucher');
let leftImage = document.querySelector('.left-voucher') ;
voucherDom.addEventListener('click',function(){
    leftImage.className = 'left-voucher showsix'
})
let timertwo = setInterval(function(){
    leftImage.className = 'left-voucher'
},5000)